<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>生产过程管理系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../css/layui.css" rel="stylesheet">
  <link href="../css/style.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">生产过程管理系统</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>

    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
        <a href="javascript:;">
          <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">个人设置</a></dd>
          <dd><a href="javascript:;">退出</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">

      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item ">
          <a class="" href="../person/person_list.html">人员信息管理</a>
          <dl class="layui-nav-child">
            <dd><a href="../person/person_list.html">人员管理</a></dd>
            <dd><a href="javascript:;">人员编辑</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;">设备信息管理</a>
          <dl class="layui-nav-child">
            <dd><a href="equipment_list.html">设备管理</a></dd>
            <dd><a href="javascript:goPage('list')">设备编辑</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="../material/material_list.html">物料信息管理</a>
          <dl class="layui-nav-child">
            <dd><a href="../material/material_list.html">物料管理</a></dd>
            <dd><a href="javascript:;">物料编辑</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="../product/product_list.html">产品信息管理</a>
          <dl class="layui-nav-child">
            <dd><a href="../product/product_list.html">产品管理</a></dd>
            <dd><a href="javascript:;">产品编辑</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
      <blockquote class="layui-elem-quote layui-text">
                <span class="layui-breadcrumb">
                  <a href="">设备信息</a>
                  <a><cite>设备管理</cite></a>
                </span>
      </blockquote>

      <!-- 查询条件表单  -->
      <form class="layui-form layui-row layui-col-space16" action="<%=request.getContextPath()%>/task/list">
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-component"></i>
            </div>
            <input type="text" name="equipmentId"  placeholder="设备编号" class="layui-input" lay-affix="clear" value="">
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-group"></i>
            </div>
            <input type="text" id="equipment_manufacturer" name="equipmentManufacturer"  placeholder="生厂厂商" class="layui-input">
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-username"></i>
            </div>
            <input type="text" id="equipment_contact" name="equipmentContact"  placeholder="售后联系人" class="layui-input">
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-input-wrap">
            <button class="layui-btn" lay-submit lay-filter="demo-table-search">查询</button>
            <a href="javascript:void(0)" id="btn_equipment_add" class="layui-btn layui-bg-blue">添加设备</a>
          </div>
        </div>
      </form>
      <!--
          列表展示
      -->
      <table class="layui-table" id="equipment-table-search"></table>


    </div>
  </div>
</div>
<!-- 底部页脚部分 -->
<div class="footer">
  <p class="text-center">
    2024 &copy;
  </p>
</div>
</body>

<div id="editBox" style="display: none;">
  <form class="layui-form" lay-filter='equipment-form' action="#">
    <div class="layui-form-item">
      <label class="layui-form-label width120">设备编号</label>
      <div class="layui-input-inline">
        <input type="text" name="equipmentId" lay-verify="required" placeholder="请输入设备编号" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label width120">设备名称</label>
      <div class="layui-input-inline">
        <input type="text" name="equipmentName" lay-verify="required" placeholder="请输入设备名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label width120">设备类型</label>
        <div class="layui-input-inline">
          <select name="equipmentType" lay-verify="required" lay-search>
            <option value="">直接选择或搜索选择</option>
            <option >轻型</option>
            <option >中型</option>
            <option >重型</option>
            <option >便携式</option>
            <option >其他</option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label width120">生产厂商</label>
      <div class="layui-input-inline">
        <input type="text" name="manufacturer" lay-verify="required" placeholder="请输入生产厂商" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label width120">出厂日期</label>
        <div class="layui-input-inline layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-date"></i>
          </div>
          <input type="text" name="standbyTime" id="standbyTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label width120">质保期</label>
        <div class="layui-input-inline layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-date"></i>
          </div>
          <input type="text" name="warrantyPeriod" id="warrantyPeriod" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label width120">售后联系人</label>
      <div class="layui-input-inline">
        <input type="text" name="afterSalesContactPerson" lay-verify="required" placeholder="请输入售后联系人" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label width120">联系电话</label>
      <div class="layui-input-inline">
        <input type="text" name="phoneNumber" lay-verify="required" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label width120">质保说明</label>
      <div class="layui-input-inline">
        <input type="text" name="warrantyStatement" lay-verify="required" placeholder="请输入质保说明" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit lay-filter="form-submit">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</div>

<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="delete">删除</a>
  </div>
</script>

<script type="text/javascript" src="../js/layui.js"></script>
<script>
  layui.use( function(){
    var laydate = layui.laydate;
    var dropdown = layui.dropdown;
    var $ = layui.$;
    var layer = layui.layer;
    var util = layui.util;
    var table = layui.table;
    var form = layui.form;

    // 渲染
    laydate.render({
      elem: '#task_start'
    });
    laydate.render({
      elem: '#task_end'
    });


    // 创建表格实例
    let mainTable = table.render({
      id: 'test1',
      elem: '#equipment-table-search',
      url: 'http://localhost:8888/equipmentSearch', // 此处为静态模拟数据，实际使用时需换成真实接口
      cols: [[
        {type: 'checkbox', title: '', fixed: true}, // 单选框
        {field:'equipment_id', title: '设备编号', width:120, sort: true, fixed: true},
        {field:'equipment_name', title: '设备名称', minWidth:120},
        {field:'equipment_type', title: '设备类型', minWidth:120, sort: true},
        {field:'equipment_manufacturer', title: '生产厂商', width:120},
        {field:'equipment_standbyTime', title: '生产时间', minWidth: 120},
        {field:'equipment_warrantyPeriod', title: '质保期', minWidth: 120},
        {field:'equipment_afterSalesPerson', title: '负责人', sort: true, width:120},
        {field:'equipment_phoneNumber', title: '联系电话', sort: true, width:120},
        {field:'equipment_warrantyStatement', title: '质保说明', sort: true, width:120},
        {fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}
      ]],

      page: true,
      height: 'full'
    });

    // 触发单元格工具事件
    table.on('tool(test1)', function(obj){ // 双击 toolDouble
      let data = obj.data; // 获得当前行数据
      console.log(data) //点开编辑传入的data
      if(obj.event === 'update'){
        let editBox = layer.open({ // 打开对话框
          title: `<button type="button" class="layui-btn layui-bg-gray">
						<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>设备信息编辑</b>
					  </button>
				`,
          type: 1,
          area: ['600px','600px'],
          content: $('#editBox').html(),
          success: function(){
            // 对弹层中的表单进行初始化渲染
            form.render();
            // 表单提交事件
            form.on('submit(form-submit)', function(data){
              var field = data.field; // 获取表单字段值
              // 显示填写结果，仅作演示用
              layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
              });
              // 此处可执行 Ajax 等操作
              var data = layui.form.val('equipment-form');
              $.ajax({ //发送一个异步请求给后台
                url: 'http://localhost:8888/saveEquipment',
                 method: 'GET',
                 datatype: 'json',
                 data:{
                  "equipment_id":data.equipmentId,
                  "equipment_name":data.equipmentName,
                  "equipment_type":data.equipmentType,
                  "equipment_manufacturer":data.manufacturer,
                  "equipment_standbyTime":data.standbyTime,
                  "equipment_warrantyPeriod":data.warrantyPeriod,
                  "equipment_afterSalesPerson":data.afterSalesContactPerson,
                  "equipment_phoneNumber":data.phoneNumber,
                  "equipment_warrantyStatement":data.warrantyStatement
                 },
                 success: function (e) {
                    layer.msg("编辑操作成功")
                    layer.close(editBox)
                    mainTable.reload(); // 重新加载表格数据
                }
              });
              return false; // 阻止默认 form 跳转
            });
          }
        });
        laydate.render({
          elem: '#edit_task_start'
        });
        laydate.render({
          elem: '#edit_task_end'
        });

        //对表单元素进行赋值
        layui.form.val('equipment-form', {
          "equipmentId": data.equipment_id,
          "equipmentName": data.equipment_name,
          "equipmentType": data.equipment_type,
          "manufacturer": data.equipment_manufacturer,
          "standbyTime": data.equipment_standbyTime,
          "warrantyPeriod": data.equipment_warrantyPeriod,
          "afterSalesContactPerson": data.equipment_afterSalesPerson,
          "phoneNumber": data.equipment_phoneNumber,
          "warrantyStatement": data.equipment_warrantyStatement
        });

      } else if(obj.event === 'delete'){
        data = obj.data; // 获得当前行数据
        console.log(data) //点开编辑传入的data
        layer.confirm('确定删除行 [id: '+ data.equipment_id +'] ', function(index){
          obj.del(); // 删除对应行（tr）的DOM结构
          layer.close(index);
          $.ajax({ //发送一个异步请求给后台
            url: 'http://localhost:8888/deleteEquipment',
            method: 'GET',
            datatype: 'json',
            data:{
              "id":data.equipment_id
            },
            success: function (e) {
              layer.msg("删除操作成功")
              mainTable.reload(); // 重新加载表格数据
            }
          });
          return false; // 阻止默认 form 跳转
        }); //layer.confirm
      } //event = delete
    });//table.on

    // 搜索提交
    form.on('submit(demo-table-search)', function(data){
      var field = data.field; // 获得表单字段
      // 执行搜索重载
      table.reload('test1', {
        page: {
          curr: 1 // 重新从第 1 页开始
        },
        where: field // 搜索的字段
      });
      layer.msg('搜索成功<br>');
      return false; // 阻止默认 form 跳转
    });

    // 添加添加设备按钮的处理
    $('#btn_equipment_add').click(function(){
      editBox = layer.open({
        title: `<button type="button" class="layui-btn layui-bg-gray">
					<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>添加设备</b>
				  </button>
			`,
        type: 1,
        area: ['600px','600px'],
        content: $('#editBox').html(),
        success: function(){
          // 对弹层中的表单进行初始化渲染
          form.render();
          // 表单提交事件
          form.on('submit(form-submit)', function(data){
            var field = data.field; // 获取表单字段值
           console.log(field);
            $.ajax({ //发送一个异步请求给后台
              url: 'http://localhost:8888/saveEquipment',
              type: "post",
              headers: {'Access-Control-Allow-Origin': '*'},
              data:{
                "method":"添加",
                "equipment_id":field.equipmentId,
                "equipment_name":field.equipmentName,
                "equipment_type":field.equipmentType,
                "equipment_manufacturer":field.manufacturer,
                "equipment_standbyTime":field.standbyTime,
                "equipment_warrantyPeriod":field.warrantyPeriod,
                "equipment_afterSalesPerson":field.afterSalesContactPerson,
                "equipment_phoneNumber":field.phoneNumber,
                "equipment_warrantyStatement":field.warrantyStatement
              },
              success: function (e) {
                layer.msg("添加操作成功")
                layer.close(editBox)
                mainTable.reload(); // 重新加载表格数据
              }
            });
            return false; // 阻止默认 form 跳转
          });
        }
      });
      laydate.render({
        elem: '#edit_task_start'
      });
      laydate.render({
        elem: '#edit_task_end'
      });
    });
  });
</script>
<script>

  function remove(id) {
    if (confirm("确定是否要删除？")) {
      window.location.href = '/task/delete?id=' + id;
    }
  }
  function goPage(url) {
    window.location.href = url;
  }

</script>
</html>